<!-- 首页菜单导航栏 -->
<template>
  <view class="home-menu" :style="menuStyle">
    <view class="menu-container">
      <view 
        class="menu-item" 
        v-for="(item, index) in menuData.list" 
        :key="index" 
        @tap="onMenuClick(item)"
      >
        <view class="menu-icon-wrapper">
          <view class="menu-icon" :style="{ backgroundColor: '#ffffff' }">
            <image v-if="item.iconUrl" class="menu-image" :src="sheep.$url.cdn(item.iconUrl)" />
            <text v-else class="menu-emoji">{{ item.emoji || '📦' }}</text>
          </view>
          <view v-if="item.badge && item.badge.show" class="menu-badge" 
                :style="{ backgroundColor: item.badge.bgColor || '#ff4757', color: item.badge.textColor || '#ffffff' }">
            {{ item.badge.text }}
          </view>
        </view>
        <view class="menu-title" :style="{ color: item.titleColor || '#333333' }">
          {{ item.title }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { computed } from 'vue';
  import sheep from '@/sheep';

  const props = defineProps({
    menuData: {
      type: Object,
      default: () => ({
        column: 5,
        list: [
          {
            title: '租满送',
            emoji: '🎁',
            bgColor: '#ff9f43',
            url: '/pages/activity/rent-gift',
            badge: { show: false }
          },
          {
            title: '商务接驾',
            emoji: '🏢',
            bgColor: '#3742fa',
            url: '/pages/service/business',
            badge: { show: false }
          },
          {
            title: '租新能源',
            emoji: '🔋',
            bgColor: '#2ed573',
            url: '/pages/goods/list?type=new-energy',
            badge: { show: true, text: '新', bgColor: '#ff4757', textColor: '#ffffff' }
          },
          {
            title: '车辆托管',
            emoji: '🚗',
            bgColor: '#1e90ff',
            url: '/pages/service/custody',
            badge: { show: false }
          },
          {
            title: '婚庆展示',
            emoji: '💒',
            bgColor: '#ff6b9d',
            url: '/pages/service/wedding',
            badge: { show: false }
          }
        ]
      })
    },
    bgColor: {
      type: String,
      default: '#f5f6fa'
    },
    padding: {
      type: String,
      default: '30rpx'
    },
    borderRadius: {
      type: String,
      default: '20rpx'
    }
  });

  const emits = defineEmits(['menuClick']);

  const menuStyle = computed(() => ({
    backgroundColor: props.bgColor,
    borderRadius: props.borderRadius
  }));

  const onMenuClick = (item) => {
    emits('menuClick', item);
    if (item.url) {
      // 定义tabBar页面列表
      const tabBarPages = [
        '/pages/index/home/home',
        '/pages/index/index',
        '/pages/index/rental',
        '/pages/index/user',
        '/pages/index/category'
      ];
      
      // 如果是tabBar页面，使用switchTab
      if (tabBarPages.includes(item.url)) {
        uni.switchTab({
          url: item.url
        });
      } else {
        // 否则使用正常跳转
        sheep.$router.go(item.url);
      }
    }
  };
</script>

<style lang="scss" scoped>
.home-menu {
  margin: 0;
  background: #f5f6fa !important;
  border-radius: 0;
  box-shadow: none;
  border-bottom: none;

  .menu-container {
    padding: 20rpx 20rpx;
    display: flex;
    align-items: center;
    gap: 12rpx;
  }

  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16rpx 10rpx;
    margin: 0;
    background: #ffffff;
    border-radius: 20rpx;
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: all 0.3s ease;
    width: 160rpx;
    height: 90rpx;
    border: 1rpx solid rgba(0, 0, 0, 0.08);

    &:active {
      transform: scale(0.95);
      opacity: 0.8;
      box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.18);
    }

    .menu-icon-wrapper {
      position: relative;
  

      .menu-icon {
        width: 80rpx;
        height: 60rpx;
        border-radius: 22rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;

        .menu-image {
          width: 57rpx;
          height: 57rpx;
        }

        .menu-emoji {
          font-size: 36rpx;
        }
      }

      .menu-badge {
        position: absolute;
        top: -8rpx;
        right: -8rpx;
        padding: 4rpx 12rpx;
        border-radius: 20rpx;
        font-size: 20rpx;
        font-weight: 600;
        min-width: 32rpx;
        height: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
        transform: scale(0.9);
      }
    }

    .menu-title {
      font-size: 24rpx;
      font-weight: 500;
      text-align: center;
      line-height: 1.2;
      color: #333333;
    }
  }
}

@media (max-width: 750rpx) {
  .menu-item {
    padding: 14rpx 8rpx;
    margin: 0;
    width: 160rpx;
    height: 90rpx;

    .menu-icon-wrapper .menu-icon {
      width: 80rpx;
      height: 80rpx;

      .menu-image {
        width: 48rpx;
        height: 48rpx;
      }

      .menu-emoji {
        font-size: 36rpx;
      }
    }

    .menu-title {
      font-size: 22rpx;
    }
  }
  
  // 小屏幕下的布局调整
  .home-menu {
    margin: 0;
  }
  
  .menu-container {
    padding: 16rpx 15rpx;
    gap: 10rpx;
  }
}
</style>
